<template>
	<view class="container">
		<!-- 店铺页面组件 -->
		<!-- <Page :items="items" /> -->
		<swiper class="swiper" style="height: 800rpx;background-color: #F4F4F4;" indicator-dots autoplay
			:interval="5000" :duration="2000" circular>
			<swiper-item style="height: 800rpx;" v-for="(item,index) in swiperArr" :key="index">
				<view class="swiper-item" style="display: flex;justify-content: center;">
					<image style="width: 90%;" lazy-load :src="item.url" mode="widthFix">
					</image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 快速签到 -->
		<view class="box u-p-t-20" v-if="gradeId == 1">
			<view class="title">
				<text>快速签到</text>
			</view>
			<view class="content">
				<image class="vip fast-point-img" src="../../static/fast-point.png" mode="heightFix"
					@click="$navTo('pages/task/index')" ></image>
			</view>
		</view>
		<!-- 会员通道 -->
		<view class="box">
			<view class="title">
				<text>会员通道</text>
			</view>
			<view class="content">
				<image class="vip" src="../../static/vip.png" mode="heightFix" @click="goVipDetail()"></image>
				<!-- <view class="arrItem">
					<view class="item" v-for="(item,index) in RecommendCommodityArr" :key="index"
						@click="handleTargetGoods(item.goods_id)">
						<image class="background" :src="box1Arr[index].img" mode="widthFix"></image>
						<view class="box">
							<image class="shopPhone" :src="item.goods_image" mode="aspectFit"></image>
							<view class="rightContent">
								<view class="price">
									{{item.goods_price}}元
								</view>
								<text>{{item.goods_name}}</text>
								<view class="desc">
									{{item.selling_point}}
								</view>
							</view>

						</view>
					</view>
				</view> -->

			</view>
		</view>
		<!-- 红酒采购通道 -->
<!-- 		<view class="box">
			<view class="title">
				<text>红酒采购通道</text>
				<view class="tip">
					专注品质.优质生活
				</view>
			</view>
			<view class="content2">
				<view class="item" v-for="(item,index) in box2Arr" @click="goClassifyDetail(index+1)" :key="index">
					<image :src="item.img" mode="widthFix"></image>
					<view class="titleText">
						{{item.title}}
					</view>
					<text>中国精品酒庄</text>
					<view class="btn">
						点击查看
					</view>
				</view>
			</view>
		</view> -->

		<view class="box">
			<view class="title">
				<text>推荐商品</text>
			</view>
			<!-- 			<view class="recommendArr" v-if="RecommendCommodityArr.length" :style="RecommendCommodityArr.length == 3 ?'height:940rpx': RecommendCommodityArr.length == 4 ? 'height:940rpx' : 'height:1400rpx' ">
				<view :class="RecommendCommodityArr.length == 4 ? 'item_4' :'item' " v-for="(item,index) in RecommendCommodityArr" :key="index"
					@click="handleTargetGoods(item.goods_id)">
						<image  :src="item.goods_image" mode="aspectFit"></image>
						<view class="info">
							<view class="price">
								{{item.goods_price}}元
							</view>
							<text>{{item.goods_name}}</text>
							<view class="desc">
								
							</view>
						</view>
				</view>
			</view> -->
			<view class="list">
				<view class="grid-list u-p-20" v-for="(item,index) in RecommendCommodityArr" :key="index"
					v-if="index < 5" @click="handleTargetGoods(item.goods_id)">
					<view class="">
						<image :src="item.goods_image" mode="aspectFit"></image>
					</view>
					<view class="info u-flex-col u-font-30 col17">
						<text>{{item.goods_name}}</text>
						<view class="price u-m-t-20 colFF7100">
							¥
							<span v-if="level == 2">{{item.goods_price_min.goods_price_2}}</span>
							<span v-if="level == 3">{{item.goods_price_min.goods_price_3}}</span>
							<span v-if="level == 4">{{item.goods_price_min.goods_price_4}}</span>
							<span v-if="level == 1">{{item.goods_price_min.goods_price_1}}</span>
						</view>
						<!-- 							<view class="desc">
								{{item.selling_point}}
							</view> -->
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		setCartTabBadge
	} from '@/utils/app'
	import * as Api from '@/api/page'
	import Page from '@/components/page'

	const App = getApp()

	export default {
		components: {
			Page
		},
		data() {
			return {
				gradeId: '',
				swiperArr: [],
				// 页面参数
				options: {},
				// 页面属性
				page: {},
				// 页面元素
				items: [],
				box1Arr: [{
						img: '../../static/item8.png',
						url: '',
					},
					{
						img: '../../static/item9.png',
						url: '',
					},
					{
						img: '../../static/item10.png',
						url: '',
					},
				],
				box2Arr: [{
						img: '../../static/item4.png',
						url: '',
						title: '零售入口',
					},
					{
						img: '../../static/item5.png',
						url: '',
						title: '品客采购通道',
					},
					{
						img: '../../static/item6.png',
						url: '',
						title: '品主采购通道',
					},
					{
						img: '../../static/item7.png',
						url: '',
						title: '品王采购通道',
					},
				],
				// 推荐商品
				RecommendCommodityArr: [],
				// level
				level: 0

			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {

			//扫码分享进来的页面
			if (typeof(options.user_id) !== 'undefined') {
				uni.setStorageSync('tjr_id', options.user_id)
			}

			// 当前页面参数
			this.options = options
			let token = uni.getStorageSync('Access-Token');
			if (token) {
				this.getSwiperArr()
				this.getRecommendCommodity()
				this.getUserInfo()
			} else {
				await this.getwxCode()
			}

			this.setPageBar()


			// 加载页面数据
			// this.getPageData();
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// 更新购物车角标
			setCartTabBadge()
		},

		methods: {
			goVipDetail() {
				this.$navTo('pages/member/index')
			},
			handleTargetGoods(goodsId) {
				this.$navTo('pages/goods/detail', {
					goodsId
				})
			},
			//用户信息
			async getUserInfo() {
				await this.myhttp({
					url: '?s=/api/User/info',
				}).then(res => {
					if (res.data.message == 'success') {
						this.gradeId = res.data.data.userInfo.grade_id
						uni.setStorageSync('userInfo', res.data.data.userInfo);
						this.$store.state.level = res.data.data.grade_id
						this.level = res.data.data.userInfo.grade_id
					}
				})
			},
			async goClassifyDetail(_type) {
				console.log(_type);
				uni.navigateTo({
					url: `/pages/category/index?type=${_type}`,
					fail(err) {
						console.log(err);
					}
				})

			},
			// 轮播图
			async getSwiperArr() {
				await this.myhttp({
					url: '?s=/api/User/getRotation',
				}).then(res => {
					if (res.data.code == 1) {
						this.swiperArr = res.data.data
					}
				})

			},
			// 推荐商品
			async getRecommendCommodity() {
				await this.myhttp({
					url: '?s=/api/Goods/list',
					data: {
						limit: 5,
						is_grade: 1,
					}
				}).then(res => {
					if (res.data.status == 200) {
						this.RecommendCommodityArr = res.data.data.list.data
					}
				})

			},

			getwxCode() {
				let _this = this
				// #ifdef MP-WEIXIN
				uni.login({
					success(res) {
						let code = res.code
						console.log(code);
						uni.showModal({
							title: '温馨提示',
							content: '亲，授权微信登录后才能正常使用小程序功能',
							success(res) {
								//如果用户点击了确定按钮
								if (res.confirm) {
									uni.getUserProfile({
										desc: '请允许登录以获取你的昵称、头像',
										success: res => {
											console.log(res);
											_this.mpWxLogin(code, res.userInfo)
										},
										fail: res => {
											//拒绝授权
											uni.showToast({
												title: '您拒绝了请求,不能正常使用小程序',
												icon: 'error',
												duration: 3000
											});
											return;
										}
									});
								} else if (res.cancel) {
									//如果用户点击了取消按钮
									uni.showToast({
										title: '您拒绝了请求,不能正常使用小程序',
										icon: 'error',
										duration: 3000
									});
									_this.getSwiperArr()
									_this.getRecommendCommodity()
									return;
								}
							}
						});
					}
				})
				// #endif
			},
			async mpWxLogin(_code, _userInfo) {
				let form = {}
				form.code = _code
				form.userInfo = _userInfo
				let tjr_id = uni.getStorageSync('tjr_id')
				if (tjr_id > 0) {
					form.tjr_id = tjr_id
				}
				await this.myhttp({
					url: '?s=/api/Passport/mpWxLogin',
					data: {
						form
					},
				}).then(res => {
					uni.setStorageSync('Access-Token', res.data.data.token);
					this.$store.state.user.user_id = res.data.data.userId
					this.$store.state.user.token = res.data.data.token
					this.getSwiperArr()
					this.getRecommendCommodity()
					this.getUserInfo()
				})
			},
			/**
			 * 加载页面数据
			 * @param {Object} callback
			 */
			getPageData(callback) {
				const app = this
				const pageId = app.options.pageId || 0
				Api.detail(pageId)
					.then(result => {
						// 设置页面数据
						const {
							data: {
								pageData
							}
						} = result
						app.page = pageData.page
						app.items = pageData.items
						// 设置顶部导航栏栏
						app.setPageBar();
					})
					.finally(() => callback && callback())
			},

			/**
			 * 设置顶部导航栏
			 */
			setPageBar() {
				const {
					page
				} = this
				// 设置页面标题
				uni.setNavigationBarTitle({
					// title: page.params.title
					title: '上富优科'
				});
				// 设置navbar标题、颜色
				// uni.setNavigationBarColor({
				// 	frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
				// 	backgroundColor: page.style.titleBackgroundColor
				// })
			},

		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.getPageData(() => {
				uni.stopPullDownRefresh()
			})
		},

		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.share_title,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.share_title,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.col17 {
		color: #171717;
	}

	.colFF7100 {
		color: #FF7100;
	}

	.container {
		background: #fff;

		.box {
			// min-height: 200rpx;
			background-color: #F4F4F4;

			.title {
				height: 90rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding-left: 60rpx;
				position: relative;

				&:before {
					content: '';
					position: absolute;
					left: 5%;
					background-color: #FFC243;
					width: 8rpx;
					height: 45rpx;
				}

				text {
					font-weight: 600;
					font-size: 34rpx;

				}

				.tip {
					font-size: 26rpx;
				}
			}

			.content {
				padding: 28rpx 32rpx;
				flex-wrap: wrap;

				.vip {
					height: 212rpx;
				}

				.fast-point-img {
					height: 134upx;
					width: 100% !important;
				}

				.arrItem .item:nth-child(1) {
					height: 100%;

					.box {
						.shopPhone {
							width: 150rpx;
							height: 80%;
						}

						.rightContent {
							position: relative;

							.price {
								font-size: 42rpx;

								&::after {
									content: '购';
									color: #fff;
									background-color: #0A0205;
									display: grid;
									place-items: center;
									width: 50rpx;
									height: 50rpx;
									border-radius: 50%;
									position: absolute;
									font-size: 26rpx;
									// right: -15%;
									// top: 10%;
									top: 2%;
									right: -20%;
								}
							}

							text {}

							.desc {
								font-size: 24rpx;
								color: #fff;
							}
						}
					}
				}

				.arrItem .item:nth-child(2) {
					margin-bottom: 0.5%;
				}

				.arrItem {
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					height: 420rpx;

					.item {
						width: 49.5%;
						height: 49%;
						padding: 0 3rpx;
						position: relative;

						.background {
							width: 100%;
							height: 100%;
							position: absolute;
							z-index: 1;
						}

						.box {
							display: flex;
							width: 100%;
							height: 100%;
							align-items: center;
							padding: 0 25rpx;

							.shopPhone {
								width: 80rpx;
								height: 80%;
								z-index: 2;
							}

							.rightContent {
								display: flex;
								flex-direction: column;
								// justify-content: space-evenly;
								justify-content: center;
								padding-left: 30rpx;
								margin-right: 20rpx;
								height: 100%;
								position: relative;

								.price {
									font-weight: bold;
									color: #FFFFFF;
									font-size: 28rpx;
									z-index: 2;

									&::after {
										content: '购';
										color: #fff;
										background-color: #0A0205;
										display: grid;
										place-items: center;
										width: 42rpx;
										height: 42rpx;
										border-radius: 50%;
										position: absolute;
										font-size: 24rpx;
										right: -20%;
										top: 2%;
									}
								}

								text {
									color: #0A0205;
									align-self: flex-end;
									font-size: 26rpx;
									margin: 15rpx 0;
									z-index: 2;
								}

								.desc {
									font-size: 20rpx;
									color: #fff;
									z-index: 2;
									height: 40%;
									width: 80%;
								}
							}

						}
					}
				}

			}

			.content2 {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;
				padding: 28rpx 32rpx;

				.item {
					&:nth-child(1) {
						margin-bottom: 10rpx;
					}

					position: relative;
					width: 336rpx;
					height: 318rpx;
					color: #fff;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						position: absolute;
						width: 336rpx;
						height: 318rpx;
						z-index: 1;
					}

					.titleText {
						font-size: 34rpx;
						font-weight: 600;
						z-index: 2;
					}

					text {
						z-index: 2;
						font-size: 26rpx;
						margin-bottom: 50rpx;
						margin-top: 10rpx;
					}

					.btn {
						width: 150rpx;
						height: 30rpx;
						background: #FFC243;
						color: #262626;
						font-size: 16rpx;
						z-index: 2;
						display: grid;
						place-items: center;
						margin-top: 30rpx;
					}
				}

			}


			.recommendArr {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				width: 100%;
				padding: 1%;
				margin-bottom: 100rpx;
				margin-top: 10rpx;
				align-items: center;

				// height: 1100rpx;
				// height: 800rpx;
				.item:nth-child(1) {
					height: 880rpx;

					// background-color: #007AFF;
					image {
						height: 700rpx;
						// width: 100%;
					}
				}

				.item:nth-child(2) {
					margin-bottom: 20rpx;
				}

				.item {
					width: 47%;
					background-color: #fff;
					height: 430rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx 10rpx 0 0;

					image {
						height: 300rpx;
						width: 100%;
						background-color: #E4E7ED;
						border-radius: 10rpx 10rpx 0 0;
					}

					.info {
						padding: 0 20rpx;

						.price {
							color: #e10000;
						}

						text {}

						.desc {}
					}
				}

				.item_4 {
					width: 47%;
					background-color: #fff;
					height: 430rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx 10rpx 0 0;

					image {
						border-radius: 10rpx 10rpx 0 0;
						height: 300rpx;
						width: 100%;
						background-color: #E4E7ED;
					}

					.info {
						padding: 0 20rpx;

						.price {
							color: #e10000;
						}

						text {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.desc {}
					}
				}
			}

		}

		.grid-list {
			display: grid;
			grid-template-columns: 40% 60%;

			image {
				width: 244upx;
				height: 244upx;
				margin: auto;
			}
		}
	}
</style>
